[data-scope='presence'][data-part='root'] {
  background-color: brown;
  color: white;
  padding: 24px;
  max-width: fit-content;
}

[data-scope='presence'][data-part='root'][data-state='open'] {
  animation: fadeIn 0.25s ease-out;
}

[data-scope='presence'][data-part='root'][data-state='closed'] {
  animation: fadeOut 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    scale: 0.8;
  }
}
